.movie-list
	height: 100%
	width: calc(100% - 5px)
	fixed: top left
	text-align: center
	scrollable()

	&::-webkit-scrollbar-track
		margin-top: $HeaderHeight

	.movies
		padding-top: $HeaderHeight
		-webkit-user-select: none;
		text-align: left
		display: flex
		flex-direction: row
		flex-wrap: wrap
		justify-content: space-between
		align-content: flex-start
		align-items: flex-start
		width: calc(100% - 5px)
		
		& > div
			margin: 0 auto
		
		.movie-item
			width: 134px
			&:empty
				height: 0
				margin: 0 10px

	.error
		font-size: 1.5em;
		text-align: center;
		margin-top: 180px;
		color: $TextError;
		font-weight: bold;

	> .spinner
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5) center center no-repeat;
		

		.loading-container
			margin: 180px auto 0px
			opacity: .8;